<head>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="/static/js/layui.js"></script>
  <script src="/static/js/FileSaver.js"></script>
  <script src="/static/js/sw.js"></script>
  <script src="/static/js/StreamSaver.js"></script>
  <!-- load before streams polyfill to detect support -->
  <script src="/static/js/polyfill.min.js"></script>
  <script type="text/javascript">
    var req = new XMLHttpRequest();
    var paused = false;
    var fileParts = [];
    var lastByteLoaded = 0;
    var byteLoaded = 0;
    var url = localStorage.getItem('curDownloadUrl');
    var filename = "unknown";
    var filesize = -1;

    $(document).ready(function () {
      req.open("GET", url, true);
      addListeners(req);
      req.setRequestHeader('Range', 'bytes=' + lastByteLoaded + '-');
      req.send();
    });

    function loadedSize() {
      var size = 0;
      for (var i = 0; i < fileParts.length; i++) {
        size += fileParts[i].byteLength;
      }
      return size;
    }

    function addListeners(req) {
      //监听进度事件
      req.onprogress = function (evt) {
        if (evt.lengthComputable) {
          // 第一次获取文件总大小
          if (filesize < 0) {
            filesize = evt.total;
            req.abort();
            // 真正开始下载文件
            resumeDownload();
          } else {
            var percentComplete = (lastByteLoaded + evt.loaded) / filesize;
            $("#progressing").html('[下载进度] ' + (percentComplete * 100) + "%");
            byteLoaded = lastByteLoaded + evt.loaded;
            if (byteLoaded >= filesize) {
              $("#ctlbtn").attr("disabled", "true");
            }
          }
        }
      };

      req.responseType = "arraybuffer"; // "blob";
      req.onreadystatechange = function () {
        if (req.status !== 200 && req.status !== 206) {
          return;
        }
        var name = req.getResponseHeader("Content-Disposition");
        filename = name.match(/attachment; filename="(.*)"/)[1];

        if (req.readyState === 4) {}
      };

      req.onload = function (oEvent) {
        var arrayBuffer = req.response; // Note: not oReq.responseText
        if (arrayBuffer) {
          fileParts.push(new Uint8Array(arrayBuffer));
          lastByteLoaded = loadedSize();
          // alert(filesize + '  ' + lastByteLoaded + '   ' + arrayBuffer.byteLength);
          if (lastByteLoaded >= filesize) {
            $("#progressing").html('[下载进度] 100%');
            $("#ctlbtn").attr("disabled", "true");

            var blob = new Blob(fileParts);
            saveAs(blob, filename);
          } else {
            resumeDownload();
          }
        }
      };
    }

    function abortDownload() {
      if (!paused) {
        // 暂停下载，结束当前partial download
        req.abort();
      } else {
        // 继续下载，开始下一个指定起始位置的partial download
        resumeDownload();
      }
      paused = !paused;
    }

    // 指定range 下载
    function resumeDownload() {
      req.open("GET", url, true);
      addListeners(req);
      lastByteLoaded = loadedSize();
      req.setRequestHeader('Range', 'bytes=' + lastByteLoaded + '-' + (lastByteLoaded + 1024 * 1024 * 20 - 1));
      req.send();
    }
  </script>
</head>

<body>
  <div id="progressing">[下载进度] 0%</div>
  <button id="ctlbtn" class="btn btn-primary" onclick="abortDownload()" style="margin:5px;">暂停/继续
  </button>
</body>